<template>
	<view class="shop-order-list">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">加入连锁</block>
		</cu-custom>

		<my-empty v-if="empty"></my-empty>

		<view class="cu-list menu-avatar margin-top-xs">
			<view class="cu-item">
				<!-- <view class="cu-avatar round lg" :style="{'backgroundImage': 'url(' + (item.avatar || '/static/default_avatar.png') + ')'}"></view> -->
				<view class="content">
					<view class="text-grey" v-if="list.title">邀请加入{{list.title}}</view>
				</view>
				<view class="action">
					<button  v-if="chain.chain_status==0" class="cu-btn bg-gradual-orange margin-tb-sm" @tap="chainJoin(chain.id,1)">同意</button>
					<button  v-if="chain.chain_status==1" class="cu-btn bg-gradual-orange margin-tb-sm" @tap="chainJoin(chain.id,-1)">退出</button>
					<!-- <button  v-if="chain.chain_status==1" class="cu-btn bg-gradual-orange margin-tb-sm">已加入</button> -->
					
				</view>
				<view class="action">
					<button  v-if="chain.chain_status==0" class="cu-btn bg-gradual-orange margin-tb-sm" @tap="chainJoin(chain.id,-1)">拒绝</button>
					<button  v-if="chain.chain_status==-1" class="cu-btn bg-gradual-orange margin-tb-sm">已拒绝</button>
					
				</view>
			</view>
		</view>


	</view>

</template>

<script>
	import shop from '@/api/shop.js';
	import MyShops from '@/components/MyShops';
	export default {
		data() {
			return {
				keyword: "",
				bool: false,
				list: [],
				empty: false,
				chain:[]
			}
		},
		components: {
			MyShops,
		},
		created() {
			this.loadData()
		},
		methods: {
			
			chainJoin(id,chain_status) {
				shop.chainJoin({
					id: id,
					chain_status:chain_status
				}).then(res => {
					if (res.code === 1) {
						uni.showToast({
							title: '操作成功'
						})
						this.loadData()
					} else {

					}
				})
			},
			loadData() {
				shop.chainShop().then(res => {
					if (res.code === 1) {
						if (res.data.length <= 0) {
							this.empty = true;
							this.list = [];
						} else {
							this.empty = false;
							this.list = res.data.chain_shop;
							this.chain = res.data.chain
						}
					} else {
						this.empty = true;
						this.list = [];
						this.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	
	.cu-list.menu-avatar>.cu-item .content{
		left:13px;
		width:200px;
	}
	
	.cu-list.menu-avatar>.cu-item .action{
		width:80px;
	}
	
	.home-header {
		position: relative;
		width: 100%;
		background-color: #ffffff;
		padding: 10px;

		.search {
			display: block;
			width: 100%;
			height: 30px;
			padding: 0 50px 0 30px;
			border: none;
			border-radius: 15px;
			background-color: #f4f4f4;
			line-height: 20px;
			font-size: 14px;
		}

		.icon {
			position: absolute;
			left: 20px;
			top: 15px;
			font-size: 18px;
		}

		.btn {
			position: absolute;
			right: 10px;
			top: 11px;
			width: 60px;
			height: 28px;
			color: #ffffff;
			font-size: 12px;
			text-align: center;
			line-height: 28px;
			background-color: #ff4f07;
			border-radius: 14px;
		}
	}
</style>